<template>
  <a-config-provider :locale="locale">
    <div class="Vi18N">
      <div>
        <h1>This is an I18N page</h1>
        <router-view />
        <h5>当前系统语言：{{ localeval }}</h5>
        <button @click="changeLocale('en-us')" v-show="localeval == 'zh-cn'">
          English
        </button>
        <button @click="changeLocale('zh-cn')" v-show="localeval == 'en-us'">
          中文
        </button>
      </div>
      <router-view />
      <h5>其他页面栏位使用方式：</h5>
      <span>{{ $t("title.home") }}</span>
      <router-view />
      <h5>内置组件语言切换：</h5>
      <div class="example">
        <a-pagination :default-current="1" :total="50" show-size-changer />
        <br />
        <a-pagination
          :total="total"
          :show-total="
            (total, range) =>
              `${range[0]}-${range[1]} of ${total} ${$t('title.code')}`
          "
          :page-size="pageSize"
          :default-current="1"
          v-model="current"
          :page-size-options="pageSizeOptions"
          show-size-changer
          @showSizeChange="onShowSizeChange()"
          show-quick-jumper
          @change="onChange()"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
const EN = "en-us";
const ZH = "zh-cn";
export default {
  name: "Vi18N",
  data() {
    return {
      locale: zhCN,
      localeval: "zh-cn",
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 500
    };
  },
  methods: {
    moment,
    changeLocale(localeval) {
      this.localeval = localeval;
      if (localeval === EN) {
        moment.locale(EN);
        this.$i18n.locale = EN;
        this.locale = null;
      } else {
        moment.locale(ZH);
        this.$i18n.locale = ZH;
        this.locale = zhCN;
      }
    },
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
      this.pageSize = pageSize;
    },
    onChange(pageNumber) {
      console.log("Page: ", pageNumber);
      this.pageSize = pageNumber;
    }
  }
};
</script>
